import React, { useCallback, useRef } from 'react';

import './index.css';

function AddInput(props) {
    const { isShow, addItem } = props;
    const inputRef = useRef();
    const submitValue = ()=>{
        const inputValue = inputRef.current.value.trim();
        if(!inputRef){
            return;
        }
        addItem(inputValue)
        inputRef.current.value = ''
    }
    return (
        <>
            {isShow && (
                <div className="input-wrapper">
                    <input type="text" 
                        ref={inputRef} 
                        placeholder="请输入待办事件" 
                    
                    />
                    <button className="btn" onClick={submitValue}>
                        增加
                    </button>
                </div>
            )}
        </>
    );
}

export default AddInput;